<template>
  <el-card class="user-article-card">
    <!-- 筛选与操作区域 -->
    <div class="filter-container">
      <el-input
        v-model="searchTitle"
        placeholder="输入标题搜索"
        clearable
        @clear="handleSearch"
        @keyup.enter="handleSearch"
        style="width: 240px; margin-right: 15px"
      />
      <el-button type="primary" @click="handleAddArticle">新增文章</el-button>
    </div>

    <!-- 文章列表 -->
    <el-table
      :data="articleList"
      border
      stripe
      style="width: 100%; margin: 20px 0"
      empty-text="暂无文章"
    >
      <el-table-column prop="title" label="文章标题" min-width="200" />
      <el-table-column prop="categoryName" label="分类" width="120" />
      <el-table-column prop="like_count" label="点赞数" width="100" />
      <el-table-column prop="created_at" label="发布时间" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            class="delete-btn"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      layout="prev, pager, next, jumper"
    />
  </el-card>
</template>

<script>
import { getUserArticles, deleteArticle, getCategoryName } from "@/api"; // 假设已定义获取用户文章和删除文章的接口
import dayjs from "dayjs";

export default {
  data() {
    return {
      articleList: [], // 当前页展示的文章（前端分页后）
      originalArticles: [], // 存储所有用户文章（原始数据）
      searchTitle: "",
      currentPage: 1,
      pageSize: 10,
      total: 0, // 总条数（过滤后）
    };
  },
  async mounted() {
    this.getArticleList();
  },
  methods: {
    // 格式化时间（不变）
    formatTime(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm");
    },

    // 获取文章列表（仅传递用户ID，存储原始数据）
    async getArticleList() {
      try {
        const res = await getUserArticles({
          userId: this.$store.state.user.id, // 仅传递用户ID
        });

        // 处理分类名称并存储原始数据
        const articlesWithCategory = [];
        for (const article of res.data.articles) {
          const categoryRes = await getCategoryName(article.category_id);
          articlesWithCategory.push({
            ...article,
            categoryName: categoryRes.data.data.name || "未分类",
          });
        }
        this.originalArticles = articlesWithCategory; // 存储所有文章原始数据
        this.filterAndPaginate(); // 首次加载时触发过滤和分页
      } catch (err) {
        this.$message.error("加载文章列表失败");
      }
    },

    // 新增：前端过滤和分页方法
    filterAndPaginate() {
      // 1. 前端模糊搜索（标题包含搜索词，不区分大小写）
      const filtered = this.originalArticles.filter((article) =>
        article.title.toLowerCase().includes(this.searchTitle.toLowerCase())
      );

      // 2. 前端分页
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.articleList = filtered.slice(start, end);
      this.total = filtered.length; // 总条数更新为过滤后数量
    },

    // 切换分页（修改为触发前端分页）
    handleCurrentChange(page) {
      this.currentPage = page;
      this.filterAndPaginate();
    },

    // 搜索文章（修改为触发前端过滤）
    handleSearch() {
      this.currentPage = 1; // 搜索时重置为第一页
      this.filterAndPaginate();
    },

    // 删除文章（刷新原始数据）
    async handleDelete(article) {
      if (!confirm("确定删除该文章吗？")) return;
      try {
        const res = await deleteArticle(article);
        console.log(res);

        if (res.data.status === 0) {
          this.$message.success("删除成功");
          // 删除后重新获取原始数据（确保一致性）
          await this.getArticleList();
        }
      } catch (err) {
        this.$message.error("删除失败");
      }
    },
    // 新增/编辑方法（不变）
    handleAddArticle() {
      this.$router.push("/article/add");
    },
    handleEdit(article) {
      this.$router.push(`/article/edit/${article.id}`);
    },
  },
};
</script>

<style scoped>
.user-article-card {
  max-width: 1200px;
  margin: 20px auto;
  padding: 25px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.filter-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delete-btn {
  color: #f56c6c;
}

.el-table .el-table__row:hover {
  background-color: #f8f9fa;
}
</style>
